<template>

   <div class="sub-filter" v-if="arr.length">
       <!-- 筛选区 -->
     <div class="item" v-for="i in arr" :key="i.id">
       <div class="head">{{i.name}}</div>
       <div class="body">
         <a href="javascript:;"  :class="{'active':!i.pid}" @click="clicck(i,undefined,undefined)">全部</a>
         <a href="javascript:;" v-for="c in i.properties" :key="c.id" :class="{'active':c.id===i.pid}"  @click="clicck(i,c.id,c.name)">{{c.name}}</a>
       </div>
     </div>
   </div>
     <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { filtersub } from '@/api/category'
import { watch, ref } from 'vue'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const array = []
    const arr = ref([])
    let brandId
    const route = useRoute()
    watch(() => route.params.id, async (a, b) => {
      arr.value = []
      if (route.path === `/category/sub/${route.params.id}`) {
        const { result } = await filtersub(route.params.id)

        arr.value.push({ id: null, name: '品牌', properties: result.brands }, ...result.saleProperties)
      }
    }, { immediate: true })

    // 每次点击触发这个函数
    const clicck = (i, id, name) => {
      if (id === undefined && name === undefined) {
        // 点击全部去除该项其他的高亮
        i.pid = ''
      }
      // array = [{ groupName: i.name, propertyName: name }]
      console.log(i.name, name, id) // i.name是当前项的字段，name是当前字段选择的name，id是当前字段选择的id
      // 高亮效果
      i.pid = id
      // 判断是否为品牌
      if (i.name === '品牌') {
        brandId = id
      } else {
        // 查找当前字段是否存在
        // console.log(item.groupName)
        const index = array.findIndex(item => item.groupName === i.name)
        // 如果index===-1就是没找到
        if (index === -1) {
          array.push({ groupName: i.name, propertyName: id })
        } else {
          array[index].propertyName = id
        }
      }
      const filterData = {}
      if (brandId !== undefined) {
        filterData.brandId = brandId
      }
      filterData.array = array.filter(o => o.propertyName !== undefined)
      emit('filter-change', filterData)
      console.log(filterData)
    }

    // console.log(arr.value)
    return { arr, clicck }
  }
}
</script>
<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  .item{
      padding: 10px;
  }
</style>
